<script setup>
  import { ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import * as echarts from 'echarts';
  import { finance } from "@/api/finance"
  // 引入 Element Plus 组件样式
  import 'element-plus/dist/index.css';
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults';
  
  // 客户总数
  const customerTotal = ref(null);

  // 漏斗图数据
  const funnelData = ref([null]);

  // 漏斗图 DOM 引用
  const funnelChartRef = ref(null);

  const option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
        feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
        }
    },
    series: [
        {
        name: '占比',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
            show: true,
            position: 'inside'
        },
        labelLine: {
            length: 10,
            lineStyle: {
            width: 1,
            type: 'solid'
            }
        },
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
        },
        emphasis: {
            label: {
            fontSize: 20
            }
        },
        data: funnelData.value
        }
    ]
    };

  const initFunnelChart = async () => {
    const res = await finance() 
    customerTotal.value=res.data.data.count   
    funnelData.value=res.data.data.table
    // 更新图表选项中的数据
    option.series[0].data = funnelData.value;
    const chartDom = funnelChartRef.value;
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
  };

  onMounted(() => {
    initFunnelChart();

  });
  </script>
  
  <template>
      <!-- 客户情况 -->
      <div class="customer-section">
        <div class="section-header">
          <span>客户情况</span>
          <span>客户总数 {{ customerTotal }}位</span>
        </div>
        <div ref="funnelChartRef" class="funnel-chart"></div>
      </div>
  </template>
  
  <style scoped>

  
  .customer-section,
  .contract-section {
    width: 48%;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 15px;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .funnel-chart,
  .pie-chart {
    width: 100%;
    height: 300px;
  }
  </style>